/**
 * GENERAL
 * Keep this attribution for legal use.
 * Credit: Taufik Nurrohman
 * http://hompimpaalaihumgambreng.blogspot.com
 * Add this CSS code for general icon dimensions.
 * ------------------------------------------------ */
.sc-icon {
  width:70px;
  height:70px;
  background-color:black;
  position:relative;
  margin:1px;
  display:inline-block;
  text-decoration:none !important;
  -webkit-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
}

.sc-icon *,
.sc-icon *:before,
.sc-icon *:after {
  position:absolute;
}

.sc-icon:hover {
  position:relative;
  top:-2px;
}

.sc-icon:after {
  content:"";
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  z-index:87;
}

.sc-icon:hover:after {
  -webkit-background-size:100% 80px;
  -moz-background-size:100% 80px;
  -ms-background-size:100% 80px;
  -o-background-size:100% 80px;
  background-size:100% 80px;
}